<template>

    <div>
        <div class="list-item" 
        :class="{'list-item__done':isFinished}" 
        @click="handleClick">{{item}}
        </div>
    </div>  



</template>

<script>
export default {

    props:{
        item:{
            type:String,

        },
        index:{
            type:Number,
            default:0
        },
        isFinished:{
            type:Boolean,
            default:false
        }

    },
    methods:{
        handleClick(){
            this.$emit('done',this.index)
        }

    }
}
</script>

<style scoped>
.list-item {
  cursor: pointer;
}
.list-item:hover {
  color: red;
}
.list-item__done {
  color: gray;
}
.list-item__done:hover {
  color: gray;
}

</style>

